import UserCenterTop from "./components/UserCenterTop"
import UserCenterBottom from "./components/UserCenterBottom"
import { Outlet, useMatch } from "react-router-dom"
import styled from "styled-components"
import kycRequiredMethods from "@/features_signal/kycRequiredMethods"
import { useIsomorphicLayoutEffect } from "ahooks"
import { PATHS } from "@/constants/path"

const PageContainerStyled = styled.div`
    display: flex;
    flex-direction: column;
    flex: 1;
`
export default function UserCenterPage() {
    const match = useMatch(PATHS.MY)

    useIsomorphicLayoutEffect(() => {
        if (match) kycRequiredMethods.execute("userCenter")
    }, [])

    return (
        <PageContainerStyled>
            <UserCenterTop></UserCenterTop>
            <UserCenterBottom></UserCenterBottom>
            <Outlet />
        </PageContainerStyled>
    )
}
